<template>

  <div>
    <!-- 指标基本信息label 开始  -->
    <div>
      <div class="header">
        <span class="headerIcon">|</span>
        <span class="headerText">{{pageName}}</span>
      </div>
    </div>
    <!-- 指标基本信息label 结束  -->
    <p style="color:#666666;">请使用下面的穿梭框选择需要参与测评的主管院级领导和被测评的处级(科级)干部,点击“添加”按钮生成考核关系。</p>
    <el-form ref="form" :model="form"  class="form" label-width="135px">
      <el-row>
        <el-col :span="8"><div class="grid-content bg-purple" style="text-align: center;vertical-align: middle;line-height:36px">参与测评的主管院级领导</div></el-col>
        <el-col :span="1"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="15"><div class="grid-content bg-purple" style="text-align: center;vertical-align: middle;line-height:36px">被测评的处级(科级)干部</div></el-col>
      </el-row>
      <el-row style="border-bottom: 1px solid #eeeeee;">
        <el-col :span="8"><div class="grid-content bg-purple">
            <treeselect id="deptModelId" v-model="form.deptId" :options="baseDeptOptions"
                        :show-count="true"  placeholder="请选择部门"
            />
          <el-select v-model="form.assessed" placeholder="请选择" style="width: 100%" clearable>
            <el-option
              v-for="item in assesseds"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

          <br/>
          <br/>

        </div></el-col>
        <el-col :span="1"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="15"><div class="grid-content bg-purple" style="height:180px;">
          <treeselect id="deptModelId2" v-model="form.deptId2" :options="baseDeptOptions"
                      :show-count="true"  placeholder="请选择部门"
          />
          <div  style="height:100px;overflow-y: scroll;margin-bottom: 10px;border:1px solid #eeeeee;">
              <el-checkbox v-for="(item, index) in equipments"
                :label="item.value" class="listitem"
                :key="item.label" @change="checked=>saveTempBeassessed(checked, item)">
                {{item.label}}

              </el-checkbox>
          </div>

          <el-button type="primary" style="float: right;bottom: 10px;margin-right: 20px;margin-bottom: 20px;"
          @click="saveRelation">保存</el-button>
<!--          <el-button type="primary" style="float: right;bottom: 10px;margin-right: 20px;margin-bottom: 20px;"-->
<!--                     @click="testOpen">测试打开</el-button>-->
        </div></el-col>
      </el-row>
    </el-form>

    <!-- 指标基本信息label 开始  -->
    <div>
      <div class="header">
        <span class="headerIcon">|</span>
        <span class="headerText">已保存的主管院级领导测评关系</span>
      </div>
    </div>
    <!-- 指标基本信息label 结束  -->
    <el-row style="border-bottom: 1px solid #eeeeee;">
      <el-col :span="8"><div class="grid-content bg-purple">
    <el-select v-model="form.assessed" placeholder="请选择" style="width: 100%;color:#000000" clearable disabled="disabled">
      <el-option
        v-for="item in assesseds"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
      </div></el-col>
      <el-col :span="1"><div class="grid-content bg-purple-light"></div></el-col>
      <el-col :span="15"><div class="grid-content bg-purple" style="height:180px;">
        <div  style="height:150px;overflow-y: scroll;margin-bottom: 10px;border:1px solid #eeeeee;">
          <div v-for="(item, index) in savedequipments" style="font-weight: normal;">
            {{item.label}}&nbsp;&nbsp;测评地址：
            <el-link type="primary" :href="item.path" target="_blank">{{item.path}}</el-link>
          </div>
        </div>
      </div></el-col></el-row>
  </div>

</template>

<script>
  import {treeselect} from '@/api/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {getUserProfile, listUser} from '@/api/system/user'
  import * as kaopingService from '@/api/dangjian/kaopingService'

  export default {
    name: 'panel1',
    data() {
      return {
        pageName:'主管院级领导评分',
        baseDeptOptions:[],
        assesseds:[],//待选考评人
        form:{
          deptId:undefined,
          deptId2:undefined,
          assessed:undefined
        },
        checkedEquipments: [], //随意修改后的checked项
        equipments: [],
        savedequipments:[]
      }
    },watch: {
      // 监听deptId
      'form.deptId': 'currDeptChange',
      'form.deptId2': 'handleSelectEvent2',
      'form.assessed': 'selectAssessed'
    },
    components: {
      Treeselect
    },
    methods:{
      currDeptChange(val){
        var that=this;
        var queryUserListParam = {}
        queryUserListParam.deptId = val;
        console.log('queryUserListParam-----', JSON.stringify(queryUserListParam));
        listUser(queryUserListParam).then(
          response => {
            //console.log('queryUser result:', response)
            var assesseds=response.rows;
             var users=[];
             for(var i=0;i<assesseds.length;i++){
               users.push({
                 value:assesseds[i].userId,
                 label:assesseds[i].nickName
               });
             }
             that.assesseds=users;
          }
        )
      },
      getDepts(){
        treeselect().then(response=>{
          this.baseDeptOptions = response.data;
        })
      },
      handleSelectEvent2(val){
        var that=this;
        var queryUserListParam = {}
        queryUserListParam.deptId =  val
        console.log('this.queryUserListParam', this.queryUserListParam)
        listUser(queryUserListParam).then(
          response => {
            // console.log('queryUser result:', response)
            var assesseds=response.rows;
            var users=[];
            for(var i=0;i<assesseds.length;i++){
              users.push({
                value:assesseds[i].userName,
                label:assesseds[i].nickName
              });
            }
            that.equipments=users;
          }
        )
      },
      selectAssessed(val){
        var that=this;
        var queryUserListParam = {}
        queryUserListParam.assessed=  val;
        queryUserListParam.assesstype=that.pageName;
        kaopingService.getYuanjiByAssessed(queryUserListParam).then(response=>{
          var savedequipments = response.data;
          var users=[];
          for(var i=0;i<savedequipments.length;i++){
            users.push({
              value:savedequipments[i].user_id,
              label:savedequipments[i].nick_name,
              path:savedequipments[i].path,
            });
          }
          that.savedequipments=users;
        });
      },
      saveRelation(){
        var that=this;
        if(that.form.assessed==undefined||that.form.assessed==""){
          that.$message.error("没有选择参与考评的人员");
          return;
        }
        if(that.checkedEquipments.length<1){
          that.$message.error("没有选择被考评的人员");
          return;
        }
        //保存关系
        var para={
          assessed:that.form.assessed,
          beassessed:that.checkedEquipments,
          assesstype:that.pageName,
          path:"http://"+window.location.host+"/kpipage.html"
        }
        kaopingService.saveRelation(para).then(response=>{
          if(response.code==200){
            that.$message.success("数据已保存");
            var savedequipments=response.data;
            var users=[];
            for(var i=0;i<savedequipments.length;i++){
              users.push({
                value:savedequipments[i].user_id,
                label:savedequipments[i].nick_name,
                path:savedequipments[i].path,
              });
            }
            that.savedequipments=users;
          }
        })
      },
      saveTempBeassessed(checked,val){
        //console.log("----------"+JSON.stringify(checked)+"----------"+JSON.stringify(val));
        //console.log("----------"+(typeof checked))
        var that=this;
        var userName=val.value;
        if(checked){
          //向数组中添加
          var has=false;
          for(var i=0;i<that.checkedEquipments.length;i++){
            var aCheck=that.checkedEquipments[i];
            if(aCheck==userName){
              has=true;
              break;
            }
          }
          if(!has){
            that.checkedEquipments.push(userName);
          }
        }else{
          //从数组中取掉
          for(var i=0;i<that.checkedEquipments.length;i++){
            var aCheck=that.checkedEquipments[i];
            if(aCheck==userName){
              that.checkedEquipments=that.checkedEquipments.slice(i,1);
              break;
            }
          }
        }
      },
      testOpen(){
        window.open("/kpipage.html", '_blank');
      }
    },
    mounted() {
      this.getDepts()
    }
  }
</script>

<style scoped>
  .header {
    /*border-bottom: 2px solid lightgrey;*/
    padding: 10px 10px 10px 0px;
  }

  .headerIcon {
    color: #00afff;
    font-weight: 900;
    font-size: 22px;
  }

  .headerText {
    font-weight: 600;
    font-size: 16px;
    padding-left: 10px;
  }

  .el-row {
    margin-bottom:1px;
    &:last-child {
     margin-bottom: 0;
   }
  }
  .el-col {
    border-radius:0px;
    vertical-align: middle;
  }
  .bg-purple-dark {
    /*background: #99a9bf;*/
  }
  .bg-purple {
    /*background: #d3dce6;*/
  }
  .bg-purple-light {
    /*background: #fbfbfb;*/
  }
  .grid-content {
    border-radius:0px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .listitem2{
    width:100%;
    height:20px;
  }

  .listitem{
    width:150px;
  }
</style>
